<template>
    <TopView></TopView>
    <div style="
    height:800px;
    background-color: #f1f7ff;
    padding: 10px;
    ">
        <el-carousel height="120px" interval="6000">
            <el-carousel-item v-for="i in imgS" :key="i" style="background-color: #f1f7ff;">
                <img :src="i.img" alt="" style="
    width: 100%;
    height: 100%;
    border-radius: 10px;
    ">
            </el-carousel-item>
        </el-carousel>
        <div style="
        height: 90px;margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        ">
            <div @click="r1"
                style="width: 48%;height:100%;background-color: #4492ff;border-radius: 10px;color: white;display:flex; justify-content: center;align-items: center;">
                <div>
                    <svg t="1728523817282" class="icsdgsdgsdgon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="8348" width="200" height="200">
                        <path
                            d="M400.756383 521.126868c-17.171078 0-31.092136 13.922081-31.092136 31.092136l0 30.332842c0 17.171078 13.922081 31.092136 31.092136 31.092136 17.170055 0 31.092136-13.922081 31.092136-31.092136l0-30.332842C431.848519 535.047926 417.926438 521.126868 400.756383 521.126868z"
                            fill="#ffffff" p-id="8349"></path>
                        <path
                            d="M622.698195 521.126868c-17.171078 0-31.092136 13.922081-31.092136 31.092136l0 30.332842c0 17.171078 13.922081 31.092136 31.092136 31.092136 17.170055 0 31.092136-13.922081 31.092136-31.092136l0-30.332842C653.791353 535.047926 639.869273 521.126868 622.698195 521.126868z"
                            fill="#ffffff" p-id="8350"></path>
                        <path
                            d="M588.406181 661.936871c-14.20042-9.351995-33.420157-5.374404-42.964534 8.714476-0.132006 0.197498-13.552667 19.669992-34.021861 19.669992-19.903306 0-32.281217-18.025539-33.121352-19.286252-9.134031-14.362102-28.157293-18.724457-42.635029-9.716292-14.589276 9.063423-19.068288 28.233018-10.004865 42.817178 11.158131 17.965164 41.785685 48.368614 85.762269 48.368614 43.763736 0 74.764797-30.176276 86.186941-48.004317C606.78169 690.169889 602.62195 671.299099 588.406181 661.936871z"
                            fill="#ffffff" p-id="8351"></path>
                        <path
                            d="M366.630145 220.097814c17.171078 0 31.092136-13.922081 31.092136-31.092136l0-10.364045 228.010017 0 0 10.364045c0 17.171078 13.922081 31.092136 31.092136 31.092136 17.170055 0 31.092136-13.922081 31.092136-31.092136L687.916569 95.728248c0-17.171078-13.922081-31.092136-31.092136-31.092136-17.171078 0-31.092136 13.922081-31.092136 31.092136l0 20.72809L397.72228 116.456339 397.72228 95.728248c0-17.171078-13.922081-31.092136-31.092136-31.092136s-31.092136 13.922081-31.092136 31.092136l0 93.276407C335.538009 206.175733 349.46009 220.097814 366.630145 220.097814z"
                            fill="#ffffff" p-id="8352"></path>
                        <path
                            d="M779.675412 100.035344c-17.170055 0-31.092136 13.922081-31.092136 31.092136s13.922081 31.092136 31.092136 31.092136c52.063773 0 94.415346 43.191708 94.415346 96.28288l0 121.04382L149.363819 379.546316 149.363819 258.430864c0-53.090149 42.351574-96.28288 94.415346-96.28288 17.171078 0 31.092136-13.922081 31.092136-31.092136s-13.922081-31.092136-31.092136-31.092136c-86.348624 0-156.599617 71.086012-156.599617 158.467151l0 543.03176c0 87.38114 70.250994 158.472268 156.594501 158.472268l535.901363 0.070608c86.348624 0 156.599617-71.091128 156.599617-158.472268L936.27503 258.502495C936.27503 171.121356 866.024036 100.035344 779.675412 100.035344zM779.680529 897.821229l-535.901363-0.070608c-52.063773 0-94.415346-43.191708-94.415346-96.287997L149.363819 441.730587l724.726939 0 0 359.802646C874.090758 854.629521 831.739185 897.821229 779.680529 897.821229z"
                            fill="#ffffff" p-id="8353"></path>
                    </svg>
                </div>
                <div style="
                margin-left: 12px;
                
                ">
                    <p style="font-size: 16px;font-weight:600">门诊挂号</p>
                    <p style="font-size: 12px;margin-top:7px">便捷预约挂号</p>
                </div>
            </div>

            <div
                style="width: 48%;height:100%;background-color: #4bd0d0;border-radius: 10px;color: white;display:flex; justify-content: center;align-items: center;">
                <div>
                    <svg t="1728524407862" class="icsdgsdgsdgon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="9442" width="200" height="200">
                        <path
                            d="M694.26516 286.98827 512 469.254453 329.732793 286.98827c-8.287757-8.287757-21.724791-8.286734-30.012547 0.001023-8.286734 8.286734-8.286734 21.723767 0 30.011524l161.04486 161.043836-108.634186 0c-11.720949 0-21.221324 9.502421-21.221324 21.221324s9.501398 21.221324 21.221324 21.221324l139.000797 0 0 89.12997L363.803773 609.617271c-11.720949 0-21.221324 9.502421-21.221324 21.221324s9.501398 21.221324 21.221324 21.221324l127.328967 0 0 131.572618c0 11.718903 9.502421 21.221324 21.221324 21.221324s21.221324-9.502421 21.221324-21.221324L533.575388 652.059919l127.327944 0c11.719926 0 21.221324-9.502421 21.221324-21.221324S672.623257 609.617271 660.903332 609.617271L533.575388 609.617271l0-89.12997 138.999774 0c11.719926 0 21.221324-9.502421 21.221324-21.221324s-9.502421-21.221324-21.221324-21.221324L563.233871 478.044654l161.043836-161.043836c8.287757-8.287757 8.287757-21.724791 0-30.012547C715.987904 278.700513 702.554964 278.700513 694.26516 286.98827z"
                            fill="#ffffff" p-id="9443"></path>
                        <path
                            d="M512 65.290005c-246.316965 0-446.709995 200.39303-446.709995 446.708971 0 246.316965 200.39303 446.709995 446.709995 446.709995s446.709995-200.39303 446.709995-446.709995C958.709995 265.683035 758.316965 65.290005 512 65.290005zM512 916.266323c-222.913952 0-404.267347-181.353394-404.267347-404.267347S289.086048 107.733677 512 107.733677s404.267347 181.352371 404.267347 404.266323S734.912929 916.266323 512 916.266323z"
                            fill="#ffffff" p-id="9444"></path>
                    </svg>
                </div>
                <div @click="df" style="
                margin-left: 12px;
                                ">
                    <p style="font-size: 16px;font-weight:600">门诊缴费</p>
                    <p style="font-size: 12px;margin-top:7px">便捷预约挂号</p>
                </div>
            </div>
        </div>
        <div style="height: 50px;background-color: white;margin-top: 10px;
        margin-top: 15px;
        border-radius: 10px;
        line-height: 50px;
        position: relative;
        ">
            <span style="
        margin-left: 14px;
        font-style: italic;
        font-weight: 600;
        ">公告</span>
            <span style="
        margin-left: 10px;
        color: #d7d7d7;
        ">|</span>
            <span style="
         margin-left: 10px;
        "></span>
            <el-carousel height="50px" direction="vertical" :autoplay="true" style="
            margin-left: 72px;
            width: 70%;
            height: 40px;
            margin-top: -49px;
            ">
                <el-carousel-item v-for="i in textS" :key="i" style="background-color: white;">
                    <p style="font-size: 13px;color:#333333" @click="go">{{ i.text }}</p>
                </el-carousel-item>
            </el-carousel>
            <span style="
            position: absolute;
            right: 15px;
            top: 3px;
            font-size: 20px;
            color: #d7d7d7;
            "> > </span>
        </div>
        <div>
            <TabQie></TabQie>
        </div>


    </div>
</template>

<script setup>
import TabQie from "@/views/tabs/home/TabQie.vue"
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import TopView from "@/components/TopView.vue"
const router = useRouter()
const go = () => {
    router.push('/show')
}
const r1 = () => {
    router.push('/appointment')
}
const df = () => {
    router.push('/payment')
}




const imgS = ref([
    { img: "https://cdn7.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u121.png" },
    { img: "https://cdn7.axureshop.com/demo/2208121/images/%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5/u121.png" }
])
const textS = ref([
    { text: "智慧医院上线啦，手机也能问诊医..." },
    { text: "智慧医院即将上线通知" }
])






</script>

<style lang="scss" scoped>
.icsdgsdgsdgon {
    width: 32px;
    height: 32px;
}

.demonstration {
    color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>